import React, { useEffect, useState } from 'react'
import '../../../api/index'
import { Swiper, Toast,Grid } from 'react-vant';
import request from '../../../utils/request'
import { useNavigate } from 'react-router-dom';
import { LISTTYPE } from '../../../types/index.d'  //仓库下的声明文件
import { ShopO } from '@react-vant/icons';
const colors = ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac'];
import {STAELIETTYPE} from '../../../types/store.d'

export const items = colors.map((color, index) => (
  <Swiper.Item key={color}>
    <div
      onClick={() => {
        Toast.info(`你点击了卡片 ${index + 1}`);
      }}
    >
      {index + 1}
    </div>
  </Swiper.Item>
));


export default function Index() {
  const navigate = useNavigate()

  const [list, setList] = useState<Array<LISTTYPE>>([])

  useEffect(() => {
    request.get('/api/list').then(res => {
      console.log(res.data.data);
      setList(res.data.data)
    })
  }, [])

  const handlClick = (params:STAELIETTYPE)=>{
    console.log('111');
    navigate('/home/car',{
      state:params
    })
    
  }

  return (
    <div>

      <header>
        <div className="demo-swiper">
          <Swiper autoplay={5000}>{items}</Swiper>
        </div>
      </header>
      <main>
      <Grid columnNum={5}>
      {Array.from({ length: 10 }, (_, i) => (
        <Grid.Item key={i} icon={<ShopO />} text="文字" />
      ))}
    </Grid>
      </main>
      <footer>

        {
          list && list.length > 0 ? list.map((item, index) => {
            return <ul>
              <li key={index} onClick={()=>handlClick(item)}><p >{item.user}</p>
                <img src={item.img} alt="" />
                <p>{item.city}</p>
                <span>{item.state}</span>
              </li>

            </ul>
          }) : '无数据'
        }

      </footer>

    </div>
  )
}
